import React from 'react';
import { useSelector } from 'react-redux';
import {
  Draggable,
  Droppable,
  DraggableProvided,
  DroppableProvided,
  DraggableStateSnapshot,
} from 'react-beautiful-dnd';
import cls from 'classnames';
import DragRow from '../DragRow';
import { RootState } from 'store';
import style from './index.module.scss';

interface DragColumnProps {
  index: number;
  columnId: string;
}

const DragColumn: React.FC<DragColumnProps> = (props) => {
  const { index, columnId } = props;
  const { columns } = useSelector((state: RootState) => state.dropDrag);
  return (
    <Draggable draggableId={columnId} index={index}>
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
        return (
          <div
            {...provided.draggableProps}
            ref={provided.innerRef}
            className={cls(style.root, {
              [style.rootActive]: snapshot.isDragging,
            })}
          >
            <div {...provided.dragHandleProps} className="title">
              {columns[columnId]?.content}
            </div>
            <Droppable droppableId={columnId}>
              {(provided: DroppableProvided, snapshot) => {
                return (
                  <div
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                    className="list"
                    // style={{
                    //   backgroundColor: `${
                    //     snapshot.isDraggingOver ? '#f00' : '#fff'
                    //   }`,
                    // }}
                  >
                    {columns[columnId]?.rowIds?.map((item, index) => {
                      return (
                        <DragRow
                          key={item}
                          index={index}
                          rowId={item}
                        ></DragRow>
                      );
                    })}
                    {provided.placeholder}
                  </div>
                );
              }}
            </Droppable>
          </div>
        );
      }}
    </Draggable>
  );
};
DragColumn.displayName = 'DragColumn';
export default DragColumn;
